<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>南丁格尔玫瑰图</title>
    <script src="../plug-in/jQuery/jquery-3.1.1.js"></script>
    <script src="../plug-in/echarts/echarts.js"></script>
    <script src="../plug-in/echarts/dark.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
</body>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);// 创建一个echart实例
    //var myChart = echarts.init(dom,'dark');
    myChart.setOption({
        title : {
            text: '南丁格尔玫瑰图',
            subtext: '纯属虚构',
            x:'center'
        },
        /**
         * 提示框组件
         */
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)" // 提示框浮层内容格式器,饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        },
        /**
         * 图例组件
         * 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
         */
        legend: {
            x : 'center',
            y : 'bottom',
            data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
        },
        /**
         * 工具栏
         * 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
         */
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
               /* magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },*/
                restore : {show: true},
                saveAsImage : {show: true},
                myTool2: {
                    show: true,
                    title: '自定义扩展方法',
                    icon: 'image://http://echarts.baidu.com/images/favicon.png',
                    onclick: function (){
                        alert('自定义扩展方法')
                    }
                }
            }
        },
        /*calculable : true,*/
        series : [
            {
                name:'半径模式',
                type:'pie',
                radius : [20, 110],
                center : ['25%', '50%'],
                roseType : 'radius',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[
                    {value:10, name:'rose1'},
                    {value:5, name:'rose2'},
                    {value:15, name:'rose3'},
                    {value:25, name:'rose4'},
                    {value:20, name:'rose5'},
                    {value:35, name:'rose6'},
                    {value:30, name:'rose7'},
                    {value:40, name:'rose8'}
                ]
            },
            {
                name:'面积模式',
                type:'pie',
                radius : [30, 110],
                center : ['75%', '50%'],
                roseType : 'area',
                data:[
                    {value:10, name:'rose1'},
                    {value:5, name:'rose2'},
                    {value:15, name:'rose3'},
                    {value:25, name:'rose4'},
                    {value:20, name:'rose5'},
                    {value:35, name:'rose6'},
                    {value:30, name:'rose7'},
                    {value:40, name:'rose8'}
                ]
            }
        ]
    });

</script>
</html>